<template>
  <div>
    <!--首页-->
    <BasicForm @register="homePageRegisterForm" v-show="tabType === '0'">
      <template #homeSettingsSlot>
        <Button type="primary" @click="homeSaveClick" :disabled="isHomeSaveFlag">保存</Button>
      </template>
    </BasicForm>
    <!--通知-->
    <BasicForm @register="noticeRegisterForm" v-show="tabType === '1'">
      <template #slackSettingsSlot>
        <Button type="primary" @click="noticeSaveClick" :disabled="isNoticeSaveFlag">保存</Button>
      </template>
    </BasicForm>
    <!--仓库-->
    <SettingWarehouse v-show="tabType === '2'" />
    <!--自动提交-->
    <BasicForm @register="warehouseRegisterForm" v-show="tabType === '3'">
      <template #warehouseSlot>
        <Button class="mr-2" type="primary">检查访问权限</Button>
        <Button class="mr-2" type="primary">保存</Button>
      </template>
    </BasicForm>
  </div>
</template>

<script lang="ts" setup>
  import { useMessage } from '/@/hooks/web/useMessage';
  import { ref, onMounted } from 'vue';
  import { BasicForm, useForm, FormSchema } from '/@/components/Form';
  import { homeSettingParams as homeSettingParams } from '/@/api/thingsborad/settings/model/settingsModel';
  import SettingWarehouse from '/@/components/thingsborad/sharedComponents/modules/SettingWarehouse.vue';
  import { Button } from 'ant-design-vue';
  import {
    getHomePageSettings,
    getInfoData,
    saveTheHomeSetting,
    saveInfoData,
    getNotificationSettings,
    editNotificationSettings,
  } from '/@/api/thingsborad/settings/settings';
  const { createMessage } = useMessage();
  let homeParams = ref<homeSettingParams>({
    pageSize: 10,
    page: 0,
    sortProperty: 'title',
    sortOrder: 'ASC',
  });
  let isHomeSaveFlag = ref<boolean>(true);
  let isNoticeSaveFlag = ref<boolean>(true);
  onMounted(() => {
    //
    getHomeSelectData();
    //
    notificationSettings();
  });
  // 表单内容 首页
  const homePageSchemas: FormSchema[] = [
    {
      field: 'homeSettings',
      component: 'CheckboxGroup',
      label: '首页设置',
      colProps: {
        span: 24,
      },
      componentProps: {
        onClick: () => {
          isHomeSaveFlag.value = false;
        },
        options: [
          {
            label: '隐藏首页仪表板工具栏',
            value: 'hideToolbar',
          },
        ],
      },
    },
    {
      field: 'homeDashboard',
      component: 'Select',
      label: '首页仪表板',
      colProps: {
        span: 12,
      },
      componentProps: {
        listHeight: 160,
        onClick: () => {
          isHomeSaveFlag.value = false;
        },
      },
    },
    {
      field: 'homeSettingsButton',
      component: 'Input',
      slot: 'homeSettingsSlot',
      label: '',
      colProps: {
        span: 24,
      },
    },
  ];
  //表单注册 首页
  const [
    homePageRegisterForm,
    { updateSchema: homeUpdateSchema, validate: homeValidate, setFieldsValue: homeSetFieldsValue },
  ] = useForm({
    layout: 'vertical',
    schemas: homePageSchemas,
    actionColOptions: {
      span: 24,
    },
    showActionButtonGroup: false,
  });
  // 表单内容 通知
  const noticeSchemas: FormSchema[] = [
    {
      field: 'SlackSettings',
      component: 'Input',
      label: 'Slack 设置',
      colProps: {
        span: 12,
      },
      componentProps: {
        placeholder: '请输入Slack API令牌',
        onClick: () => {
          isNoticeSaveFlag.value = false;
        },
      },
    },
    {
      field: 'slackSettingsButton',
      component: 'Input',
      slot: 'slackSettingsSlot',
      label: '',
      colProps: {
        span: 24,
      },
    },
  ];
  //表单注册 通知
  const [noticeRegisterForm, { validate: noticeValidate, setFieldsValue: noticeSetFieldsValue }] =
    useForm({
      layout: 'vertical',
      schemas: noticeSchemas,
      actionColOptions: {
        span: 24,
      },
      showActionButtonGroup: false,
    });
  // 表单内容 仓库
  const warehouseSchemas: FormSchema[] = [
    {
      field: 'warehouse',
      component: 'Input',
      label: '仓库 URL',
      required: true,
      colProps: {
        span: 13,
      },
      componentProps: {
        placeholder: '请输入仓库 URL',
      },
    },
    {
      field: 'branchName',
      component: 'Input',
      label: '默认分支名称',
      colProps: {
        span: 13,
      },
      componentProps: {
        placeholder: '请输入默认分支名称',
      },
    },
    {
      field: 'warehouseCheckbox',
      component: 'CheckboxGroup',
      label: '',
      colProps: {
        span: 24,
      },
      componentProps: {
        options: [
          {
            label: '只读',
            value: 'readOnly',
          },
        ],
      },
    },
    {
      field: 'showSubmissions',
      component: 'CheckboxGroup',
      label: '',
      colProps: {
        span: 24,
      },
      componentProps: {
        options: [
          {
            label: '显示合并提交',
            value: 'showSubmissions',
          },
        ],
      },
    },
    {
      field: 'authenticationMethod',
      component: 'Select',
      label: '身份验证方法',
      required: true,
      colProps: {
        span: 13,
      },
      defaultValue: 'Password/AccessToken',
      componentProps: {
        options: [
          {
            label: '密码/访问令牌',
            value: 'Password/AccessToken',
          },
          {
            label: '私钥',
            value: 'PrivateKey',
          },
        ],
      },
    },
    {
      field: 'userName',
      component: 'Input',
      label: '用户名',
      colProps: {
        span: 13,
      },
      componentProps: {
        placeholder: '请输入用户名',
      },
    },
    {
      field: 'Password/AccessToken',
      component: 'Input',
      label: '密码/访问令牌',
      colProps: {
        span: 13,
      },
      componentProps: {
        placeholder: '请输入密码',
      },
    },
    {
      field: ' warehouseButton',
      component: 'Input',
      slot: 'warehouseSlot',
      label: '',
      colProps: {
        span: 24,
      },
    },
  ];
  //表单注册  仓库
  const [warehouseRegisterForm] = useForm({
    layout: 'vertical',
    schemas: warehouseSchemas,
    actionColOptions: {
      span: 24,
    },
    showActionButtonGroup: false,
  });
  //组件通信
  // eslint-disable-next-line vue/require-prop-types
  defineProps(['tabType']);
  async function getHomePageData(_params: homeSettingParams) {
    try {
      let paramsFlag: any = {
        pageSize: 10,
        page: 0,
        sortProperty: 'title',
        sortOrder: 'ASC',
      };
      const HomePageSettings = await getHomePageSettings(paramsFlag);
      const homeValidateValue = await homeValidate();
      let data: any;

      data = {
        dashboardId:
          homeValidateValue.homeDashboard === undefined ? null : HomePageSettings.data[0].id,
        hideDashboardToolbar: homeValidateValue.homeSettings.length === 0 ? false : true,
      };

      await saveInfoData(data);
      let options = ref<Array<any>>([]);
      HomePageSettings.data.forEach((item) => {
        options.value.push({
          label: item.name,
          value: item.name,
        });
      });
      homeUpdateSchema({
        field: 'homeDashboard',
        componentProps: {
          options: options.value,
        },
      });
    } catch (error) {}
  }
  // 是否初始化数据
  async function getHomeSelectData() {
    try {
      const infoData = await getInfoData();
      if (infoData.hideDashboardToolbar) {
        homeSetFieldsValue({
          homeSettings: 'hideToolbar',
        });
      }
      if (infoData.dashboardId !== null) {
        const homeSettingValue = await saveTheHomeSetting(infoData.dashboardId.id);
        homeSetFieldsValue({
          homeDashboard: homeSettingValue.title,
        });
      }
      getHomePageData(homeParams.value);
    } catch (error) {}
  }
  async function homeSaveClick() {
    try {
      const homeValidateValue = await homeValidate();
      if (homeValidateValue.homeDashboard !== undefined) {
        homeParams.value.textSearch = homeValidateValue.homeDashboard;
      }
      await getHomePageData(homeParams.value);
      createMessage.success('首页仪表板保存成功');
    } catch (error) {}
  }

  async function notificationSettings() {
    try {
      const notificationSettingsData = await getNotificationSettings();
      if ('SLACK' in notificationSettingsData.deliveryMethodsConfigs) {
        noticeSetFieldsValue({
          SlackSettings: notificationSettingsData.deliveryMethodsConfigs.SLACK.botToken,
        });
      }
    } catch (error) {}
  }

  async function noticeSaveClick() {
    try {
      const noticeValidateValue = await noticeValidate();

      let data: any = {
        deliveryMethodsConfigs: {
          SLACK: {
            method: 'SLACK',
            botToken: noticeValidateValue.SlackSettings,
          },
        },
      };
      await editNotificationSettings(data);
      createMessage.success('Slack设置保存成功');
    } catch (error) {}
  }
</script>
